<template>
  <div class="shareContainer" ref="shareContainer">
    <el-tabs v-model="activeName" type="card" @tab-click="changeTabs">
      <el-tab-pane label="车辆业务汇总表" name="first">
        <div class="searchContainer">
          <el-form ref="form" :model="searchData" :inline="true">
            <el-form-item label="网点" size="mini">
              <el-select v-model="searchData.website" style="width: 120px">
                <el-option
                  v-for="website in websiteList"
                  :key="website.id"
                  :label="website.name"
                  :value="website.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="发车时间" size="mini">
              <el-date-picker
                v-model="searchData.createTime"
                type="daterange"
                align="right"
                unlink-panels
                style="width: 220px"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              />
            </el-form-item>
            <el-form-item label="车牌号" size="mini">
              <el-input v-model="searchData.carNumber"></el-input>
            </el-form-item>
            <el-form-item size="mini">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchList"
                data-tracker="P20-1"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="operation">
          <el-button
            plain
            type="primary"
            @click="exportList"
            data-tracker="P20-2"
            >导出</el-button
          >
          <el-button
            plain
            type="primary"
            @click="printList"
            data-tracker="P20-3"
            >打印</el-button
          >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalListNum"
          >
          </el-pagination>
        </div>
        <el-table
          ref="multipleTable"
          :max-height="maxheight"
          :data="orders"
          border
          align="center"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column
            prop=""
            fixed
            label="序号"
            width="50"
            type="index"
          ></el-table-column>
          <el-table-column prop="car_no" fixed label="车牌号" width="100">
            <template slot-scope="scope">
              <div
                @click="clickToDetail(scope.row.car_no)"
                style="cursor: pointer; color: blue"
              >
                {{ scope.row.car_no }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="website" label="网点" width="180">
          </el-table-column>
          <el-table-column prop="vehicle_type" label="需求车型" width="180">
          </el-table-column>
          <el-table-column
            prop="vehicle_length"
            label="需求车长（单位：米）"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.vehicle_length / 100 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="vehicle_load"
            label="核载重量（单位：千克）"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.vehicle_load / 1000 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="space_size"
            label="核载体积（单位：立方米）"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.space_size / 1000000 }}
            </template>
          </el-table-column>
          <el-table-column prop="total_singular" label="总单数" width="170">
          </el-table-column>
          <el-table-column prop="weight" label="总重量" width="180">
            <template slot-scope="scope">
              {{ scope.row.weight / 1000 }}
            </template>
          </el-table-column>
          <el-table-column prop="volume" label="总体积" width="180">
            <template slot-scope="scope">
              {{ scope.row.volume / 1000000 }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="车辆业务明细表" name="second" v-if="showDetail">
        <detail ref="detail"></detail>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import detail from "./components/detail.vue";
import pagination from "@/components/pagination";
import { getVehicleWorkList } from "@/api/report";
import { reqWebsiteList } from "@/api/waybill";
import { setToken, getToken } from "@/utils/auth";
export default {
  data() {
    return {
      activeName: "first", //汇总明细的tabs切换
      showDetail: false,
      selectedNums: [], //选中的单号
      websiteList: [], //网点
      searchData: {
        website: "", //网点
        createTime: [
          new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30),
          new Date().getTime(),
        ], //开单时间
        carNumber: "", //车牌号
      }, //查询条件
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 100, //一页多少条
      //测试用
      orders: [],
      selectedOrders: [],
      selectedDetails: [],
      maxheight: 400,
    };
  },
  components: { detail, pagination },
  mounted() {
    this.displayOrders();
    this.getWebsiteList();
  },
  computed: {
    isAll() {
      return this.selectedOrders.length === this.orders.length;
    },
  },
  methods: {
    changeTabs() {
      //点击切换tabs
    },
    async getWebsiteList() {
      let result = await reqWebsiteList({ type: "0" });
      this.websiteList = result.data;
    },
    async displayOrders() {
      var cookie = getToken("Cookie");
      const { pageNum, pageSize, searchData } = this;
      let result = await getVehicleWorkList({
        website_id: String(searchData.website),
        car_no: String(searchData.carNumber),
        start_time: String(parseInt(searchData.createTime[0] / 1000)),
        end_time: String(parseInt(searchData.createTime[1] / 1000)),
        page: String(pageNum),
        page_size: String(pageSize),
      });
      this.orders = result.data.data;
      this.pageNum = result.data.pagination.page * 1;
      this.totalListNum = result.data.pagination.total * 1;
      this.pageSize = result.data.pagination.page_size * 1;
    },
    searchList() {
      //查询功能
      this.displayOrders();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val; //一页多少条
      this.displayOrders(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val; //第多少页
      this.displayOrders(this.pageNum, this.pageSize);
    },
    handleSelectionChange(checked) {
      this.selectedOrders = checked.map((item) => item.car_no);
    },
    clickToDetail(id) {
      //点击去对应发货人的详情
      this.showDetail = true;
      this.$nextTick(() => {
        this.$refs.detail.displayOrders(id);
        this.activeName = "second";
      });
    },
    exportList() {
      //导出
    },
    printList() {
      //打印
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  background-color: #fff;
  .searchContainer {
    padding: 0 20px;
    border-bottom: 7px solid #e8f1f7;
  }
  .operation {
    height: 35px;
    padding-top: 5px;
    ::v-deep .el-pagination {
      float: right;
      .el-input--mini .el-input__inner {
        height: 24px;
      }
    }
  }
  .displayArea {
    background-color: #fff;
    overflow: auto; //显示自带的滚动条
    white-space: nowrap;
    height: 100%;
    table {
      font-size: 12px;
      border: 1px solid #cccccc;
      border-collapse: collapse;
      //排第一二三的元素加定位,然后给排第四的元素加左外边距
      th:nth-child(1),
      td:nth-child(1) {
        width: 40px;
        text-align: center;
        background-color: inherit; //继承背景颜色
        vertical-align: inherit; //设置元素的基线对齐方式
        position: absolute;
        left: 0px;
        z-index: 1;
      }
      th:nth-child(2),
      td:nth-child(2) {
        width: 40px;
        text-align: center;
        background-color: inherit;
        vertical-align: inherit;
        position: absolute;
        left: 40px;
        z-index: 1;
      }
      th:nth-child(3),
      td:nth-child(3) {
        width: 150px;
        background-color: inherit;
        vertical-align: inherit;
        position: absolute;
        left: 80px;
        z-index: 1;
        cursor: pointer;
        color: #409eff;
      }
      th:nth-child(4),
      td:nth-child(4) {
        margin-left: 233px;
      }
      tr {
        background-color: #fff;
        &:nth-child(even) {
          background: #e9e9e9;
        }
        th,
        td {
          text-align: center;
          border: 1px solid #cccccc;
          display: inline-block;
          width: 183px;
          height: 31px;
          line-height: 31px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
        }
        // &:nth-child(2) {
        //   background-color: #fff !important;
        // }
      }
    }
  }
}
</style>
